<template>
  <div class="sport-community">
    <div class="community-content">
      <!-- 左侧运动类型导航栏 -->
      <div class="sport-nav">
        <div class="nav-card">
          <div class="nav-header">
            <h3>运动类型</h3>
          </div>
          <ul class="nav-list">
            <li 
              v-for="(sport, index) in sportTypes" 
              :key="index"
              :class="{ active: selectedSport === sport.name }"
              @click="selectSport(sport.name)"
            >
              <span class="nav-item-text">{{ sport.name }}</span>
            </li>
          </ul>
          
          <!-- 健康标语 -->
          <div class="health-quotes-container">
            <div class="health-quote quote-1">
              生命在于运动，健康源于锻炼
            </div>
            <div class="health-quote quote-2">
              每天运动一小时，健康生活一辈子
            </div>
            <div class="health-quote quote-3">
              强身健体，预防疾病，从运动开始
            </div>
          </div>
        </div>
      </div>

      <!-- 中间帖子列表 -->
      <div class="posts-container">
        <div class="posts-card">
          <!-- 新增搜索栏 -->
          <div class="search-section">
            <div class="search-container">
              <el-input
                v-model="searchKeyword"
                placeholder="搜索运动帖子..."
                class="search-input"
                clearable
                size="large"
              >
                <template #prefix>
                  <el-icon :size="20"><Search /></el-icon>
                </template>
              </el-input>
              <el-button type="primary" class="search-btn" @click="searchPosts" size="large">
                搜索
              </el-button>
            </div>
          </div>
          
          <div class="posts-header">
            <!-- 删除所有标题显示逻辑 -->
          </div>
          <div 
            v-for="post in displayedPostsPage" 
            :key="post.id"
            class="post-card"
          >
            <div class="post-header">
              <el-avatar :src="post.avatar" class="post-avatar" :size="48" />
              <div class="post-user-info">
                <span class="post-author">{{ post.author }}</span>
                <span class="post-time">{{ post.time }}</span>
              </div>
            </div>
            <h3 class="post-title">{{ post.title }}</h3>
            <p class="post-content">{{ post.content }}</p>
            <div class="post-images" v-if="post.images">
              <el-image 
                :src="post.images[0]"
                alt="post image"
                class="post-image"
                lazy
                fit="cover"
              >
                <template #placeholder>
                  <div class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                </template>
                <template #error>
                  <div class="image-slot">
                    <el-icon><Picture /></el-icon>
                  </div>
                </template>
              </el-image>
            </div>
            <div class="post-actions">
              <div class="action-item" :class="{ liked: post.liked }" @click="toggleLike(post)">
                <el-icon :size="20">
                  <svg v-if="!post.liked" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="1.5">
                    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                  </svg>
                  <svg v-else width="26" height="26" viewBox="0 0 24 24" fill="#ff3860" stroke="#ff3860" stroke-width="1.5">
                    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                  </svg>
                </el-icon>
                <span class="action-text">{{ post.likes }}</span>
              </div>
              <div class="action-item" @click="viewComments(post)">
                <el-icon :size="20"><ChatRound /></el-icon>
                <span class="action-text">{{ post.comments }}</span>
              </div>
              <div class="action-item" :class="{ favorited: post.favorited }" @click="toggleFavorite(post)">
                <el-icon :size="20">
                  <svg v-if="!post.favorited" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#6c757d" stroke-width="1.5">
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                  </svg>
                  <svg v-else width="26" height="26" viewBox="0 0 24 24" fill="#ffc107" stroke="#ffc107" stroke-width="1.5">
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                  </svg>
                </el-icon>
              </div>
              <div class="action-item" @click="sharePost(post)">
                <el-icon :size="20"><Share /></el-icon>
              </div>
            </div>
          </div>
          
          <!-- 分页组件 -->
          <div class="pagination-container">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[3, 5, 10, 20]"
              :small="false"
              :disabled="false"
              layout="total, sizes, prev, pager, next, jumper"
              :total="displayedPosts.length"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>

      <!-- 右侧积分排行榜 -->
      <div class="ranking-container">
        <div class="ranking-card">
          <div class="ranking-header">
            <h3>运动积分排行榜</h3>
          </div>
          <div class="ranking-list">
            <div 
              v-for="(user, index) in rankingList" 
              :key="user.id"
              class="ranking-item"
            >
              <div class="ranking-info">
                <span class="rank-number" :class="getRankClass(index)">
                  {{ index + 1 }}
                </span>
                <el-avatar :src="user.avatar" class="ranking-avatar" :size="40" />
                <span class="ranking-name">{{ user.name }}</span>
              </div>
              <span class="ranking-score">{{ user.score }}分</span>
            </div>
          </div>
          
          <!-- 励志图片 -->
          <div class="motivational-image-container">
            <el-image 
              src="/src/assets/励志.jpg"
              fit="cover"
              class="motivational-image"
            >
              <template #error>
                <div class="image-slot">
                  <el-icon><Picture /></el-icon>
                </div>
              </template>
            </el-image>
          </div>
        </div>
      </div>
    </div>

    <!-- 悬浮发帖按钮 -->
    <div class="float-post-btn" @click="goToAddForum">
      <el-icon :size="32"><Plus /></el-icon>
    </div>

    <!-- 发帖对话框 -->
    <el-dialog
      v-model="showPostDialog"
      title="发布新帖子"
      width="500px"
      class="post-dialog"
    >
      <el-form :model="newPost" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="newPost.title" placeholder="请输入帖子标题" size="large" />
        </el-form-item>
        <el-form-item label="内容">
          <el-input 
            v-model="newPost.content" 
            type="textarea" 
            :rows="4" 
            placeholder="请输入帖子内容"
            size="large"
          />
        </el-form-item>
        <el-form-item label="运动类型">
          <el-select v-model="newPost.sportType" placeholder="请选择运动类型" size="large">
            <el-option 
              v-for="sport in sportTypes" 
              :key="sport.name" 
              :label="sport.name" 
              :value="sport.name"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showPostDialog = false" size="large">取消</el-button>
          <el-button type="primary" @click="submitPost" size="large">发布</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'


const router = useRouter()

// 搜索关键词
const searchKeyword = ref('')

// 运动类型列表
const sportTypes = ref([
  { name: '全部' },
  { name: '跑步' },
  { name: '游泳' },
  { name: '骑行' },
  { name: '瑜伽' },
  { name: '健身' },
  { name: '篮球' },
  { name: '足球' }
])

// 选中的运动类型
const selectedSport = ref('全部')

// 帖子数据
const posts = ref([
  {
    id: 1,
    author: '运动达人',
    avatar: '/src/assets/头像.jpg',
    time: '2小时前',
    title: '晨跑10公里，感受清晨的美好',
    content: '今天早上5点起床，完成了10公里的晨跑，感觉整个人都充满了活力。清晨的空气特别清新，推荐大家也尝试一下晨跑！',
    images: [
      '/src/assets/跑道.jpg',
      '/src/assets/手表.jpg'
    ],
    likes: 24,
    comments: 8,
    liked: false,
    sportType: '跑步',
    favorited: false,
    shares: 3
  },
  {
    id: 2,
    author: '健身新手',
    avatar: '/src/assets/头像.jpg',
    time: '5小时前',
    title: '第一次尝试瑜伽，感觉很不错',
    content: '今天第一次参加了瑜伽课程，感觉身体得到了很好的拉伸和放松。虽然有些动作还不太标准，但老师很耐心，下次还会继续参加。',
    images: [],
    likes: 15,
    comments: 3,
    liked: true,
    sportType: '瑜伽',
    favorited: true,
    shares: 1
  },
  {
    id: 3,
    author: '游泳健将',
    avatar: '/src/assets/头像.jpg',
    time: '1天前',
    title: '游泳技巧分享：如何提高自由泳效率',
    content: '分享几个提高自由泳效率的小技巧：1.保持身体水平；2.注意呼吸节奏；3.手臂划水要到位；4.腿部打水要协调。希望对大家有帮助！',
    images: [
      'https://fuss10.elemecdn.com/1/8e/4aa2e58f9a181d2482798fcf37627jpeg.jpeg'
    ],
    likes: 42,
    comments: 12,
    liked: false,
    sportType: '游泳',
    favorited: false,
    shares: 5
  },
  {
    id: 4,
    author: '骑行爱好者',
    avatar: '/src/assets/头像.jpg',
    time: '3天前',
    title: '周末环湖骑行，风景美不胜收',
    content: '这个周末和朋友们一起去环湖骑行，沿途风景优美，空气清新，真的是太享受了。骑行不仅锻炼身体，还能放松心情。',
    images: [
      'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    ],
    likes: 38,
    comments: 9,
    liked: false,
    sportType: '骑行',
    favorited: false,
    shares: 2
  },
  {
    id: 5,
    author: '篮球高手',
    avatar: '/src/assets/头像.jpg',
    time: '5天前',
    title: '篮球技巧：如何提高投篮命中率',
    content: '分享几个提高投篮命中率的技巧：1.保持正确的投篮姿势；2.注意手腕的发力；3.眼睛要瞄准篮筐；4.多加练习，形成肌肉记忆。',
    images: [],
    likes: 27,
    comments: 5,
    liked: true,
    sportType: '篮球',
    favorited: false,
    shares: 4
  },
  {
    id: 6,
    author: '足球爱好者',
    avatar: '/src/assets/头像.jpg',
    time: '1周前',
    title: '足球比赛心得：团队配合的重要性',
    content: '在昨天的足球比赛中，我们队凭借出色的团队配合赢得了比赛。足球是一项团队运动，个人能力固然重要，但团队配合更加关键。',
    images: [
      'https://fuss10.elemecdn.com/a/3f/3f9e3d9d4c1e4a1e4a3f3f3f3f3f3fjpeg.jpeg'
    ],
    likes: 45,
    comments: 11,
    liked: false,
    sportType: '足球',
    favorited: true,
    shares: 6
  }
])

// 分页相关数据
const currentPage = ref(1)
const pageSize = ref(3)

// 显示的帖子（根据选中的运动类型过滤）
const displayedPosts = computed(() => {
  if (selectedSport.value === '全部') {
    return posts.value
  }
  return posts.value.filter(post => post.sportType === selectedSport.value)
})

// 当前页显示的帖子
const displayedPostsPage = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return displayedPosts.value.slice(start, end)
})

// 积分排行榜数据
const rankingList = ref([
  { id: 1, name: '运动达人', avatar: '/src/assets/头像.jpg', score: 2450 },
  { id: 2, name: '健身新手', avatar: '/src/assets/头像.jpg', score: 1890 },
  { id: 3, name: '游泳健将', avatar: '/src/assets/头像.jpg', score: 1760 },
  { id: 4, name: '骑行爱好者', avatar: '/src/assets/头像.jpg', score: 1620 },
  { id: 5, name: '瑜伽大师', avatar: '/src/assets/头像.jpg', score: 1480 },
  { id: 6, name: '跑步先锋', avatar: '/src/assets/头像.jpg', score: 1390 },
  { id: 7, name: '足球之星', avatar: '/src/assets/头像.jpg', score: 1320 },
  { id: 8, name: '篮球高手', avatar: '/src/assets/头像.jpg', score: 1250 },
  { id: 9, name: '网球精英', avatar: '/src/assets/头像.jpg', score: 1180 },
  { id: 10, name: '羽毛球达人', avatar: '/src/assets/头像.jpg', score: 1120 }
])

// 用户进度
const userProgress = ref(65)

// 发帖对话框显示状态
const showPostDialog = ref(false)

// 新帖子数据
const newPost = reactive({
  title: '',
  content: '',
  sportType: ''
})

// 选择运动类型
const selectSport = (sport) => {
  selectedSport.value = sport
  // 切换运动类型时重置到第一页
  currentPage.value = 1
}

// 搜索帖子
const searchPosts = () => {
  if (searchKeyword.value) {
    // 这里应该调用后端API进行搜索
    console.log('搜索关键词:', searchKeyword.value)
  }
}

// 切换点赞状态
const toggleLike = (post) => {
  post.liked = !post.liked
  post.likes += post.liked ? 1 : -1
}

// 查看评论
const viewComments = (post) => {
  // 跳转到评论页面
  console.log('查看帖子评论:', post.id)
}

// 切换收藏状态
const toggleFavorite = (post) => {
  post.favorited = !post.favorited
  console.log('收藏状态:', post.favorited)
}

// 分享帖子
const sharePost = (post) => {
  console.log('分享帖子:', post.id)
  // 这里可以调用浏览器的分享API或者自定义分享功能
}

// 跳转到发帖页面
const goToAddForum = () => {
  router.push('/add-forum')
}

// 获取排名样式
const getRankClass = (index) => {
  if (index === 0) {
    return 'first'
  } else if (index === 1) {
    return 'second'
  } else if (index === 2) {
    return 'third'
  }
  return ''
}

// 提交新帖子
const submitPost = () => {
  console.log('新帖子:', newPost)
  // 这里应该调用后端API提交新帖子
  showPostDialog.value = false
}

// 分页相关方法
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}
</script>

<style scoped>
.sport-community {
  background-color: #e8f5e9;
  min-height: 100vh;
  padding: 20px 0;
}

/* 内容区域 */
.community-content {
  display: flex;
  margin: 0 auto;
  padding: 0 30px;
  gap: 30px;
  min-height: calc(100vh - 40px);
}

/* 左侧导航栏 */
.sport-nav {
  flex: 0.6;
}

.nav-card {
  background: white;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 20px;
  height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}

.nav-header h3 {
  margin: 0 0 20px 0;
  color: #333;
  border-bottom: 2px solid #27AE60;
  padding-bottom: 15px;
  font-weight: 600;
  font-size: 24px;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-list li {
  padding: 15px 20px;
  margin-bottom: 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s;
  color: #666;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
}

.nav-list li:hover {
  background-color: #f0f9f0;
  color: #27AE60;
}

.nav-list li.active {
  background-color: #e6f9e6;
  color: #27AE60;
  font-weight: bold;
  border-right: 3px solid #27AE60;
}

/* 励志图片 */
.motivational-image-container {
  margin-top: 30px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.motivational-image {
  width: 100%;
  height: 200px;
}

/* 中间帖子列表 */
.posts-container {
  flex: 2;
}

.posts-card {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* 搜索区域 */
.search-section {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #eee;
}

.search-container {
  display: flex;
  width: 100%;
  gap: 20px;
  margin: 0 auto;
}

.search-input {
  flex: 1;
}

.search-input :deep(.el-input__wrapper) {
  border-radius: 36px;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  height: 45px;
}

.search-btn {
  border-radius: 36px;
  background-color: #27AE60;
  color: white;
  border: 2px solid #27AE60;
  font-weight: bold;
  font-size: 18px;
  transition: all 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  padding: 12px 30px;
  height: 45px;
}

.search-btn:hover {
  background-color: #219653;
  border-color: #219653;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.posts-header h2 {
  color: #333;
  margin: 0 0 30px 0;
  font-weight: 600;
  font-size: 28px;
  text-align: center;
}

.post-card {
  background: white;
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  border: 1px solid #eee;
}

.post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.2);
}

.post-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.post-avatar {
  margin-right: 20px;
}

.post-user-info {
  display: flex;
  flex-direction: column;
}

.post-author {
  font-weight: 600;
  color: #212529;
  margin-bottom: 5px;
  font-size: 20px;
}

.post-time {
  font-size: 16px;
  color: #888;
}

.post-title {
  color: #333;
  margin: 20px 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.4;
}

.post-content {
  color: #495057;
  line-height: 1.8;
  margin-bottom: 25px;
  font-size: 18px;
  font-weight: 400;
}

.post-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
  margin-bottom: 25px;
}

.post-image {
  width: 100%;
  border-radius: 12px;
  aspect-ratio: 1;
  object-fit: cover;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  color: #999;
  font-size: 16px;
}

.image-slot .dot {
  animation: dot 2s infinite steps(3, start);
  overflow: hidden;
}

@keyframes dot {
  33% { content: '.' }
  66% { content: '..' }
  100% { content: '...' }
}

.action-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #6c757d;
  transition: all 0.3s;
  font-weight: 500;
  font-size: 16px;
  padding: 8px 12px;
  border-radius: 8px;
}

.action-item:hover {
  color: #008000;
  background-color: #f0f9f0;
}

.action-item.liked {
  color: #ff3860;
}

.action-item.favorited {
  color: #ffc107;
}


.post-actions {
  display: flex;
  gap: 20px;
  padding-top: 25px;
  border-top: 1px solid #eee;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* 分页容器 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

/* 右侧排行榜 */
.ranking-container {
  flex: 0.7;
}

.ranking-card {
  background: white;
  border-radius: 16px;
  padding: 25px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 20px;
  height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}

.ranking-header h3 {
  margin: 0 0 25px 0;
  color: #333;
  text-align: center;
  border-bottom: 2px solid #27AE60;
  padding-bottom: 20px;
  font-weight: 600;
  font-size: 24px;
}

.ranking-list {
  margin-bottom: 30px;
}

.ranking-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 12px;
  border-bottom: 1px solid #eee;
}

.ranking-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.rank-number {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: bold;
  font-size: 16px;
  background-color: #f0f0f0;
  color: #999;
}

.rank-number.first {
  background: linear-gradient(135deg, #ffd700, #ffa500);
  color: white;
}

.rank-number.second {
  background: linear-gradient(135deg, #c0c0c0, #a9a9a9);
  color: white;
}

.rank-number.third {
  background: linear-gradient(135deg, #cd7f32, #a0522d);
  color: white;
}

.ranking-avatar {
  width: 40px;
  height: 40px;
}

.ranking-name {
  font-weight: 600;
  color: #212529;
  font-size: 18px;
}

.ranking-score {
  font-weight: bold;
  color: #008000;
  font-size: 18px;
}

/* 健康标语 */
.health-quotes-container {
  margin-top: 30px;
}

.health-quote {
  color: white;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 15px;
}

.health-quote:last-child {
  margin-bottom: 0;
}

.quote-1 {
  background: linear-gradient(135deg, #27AE60, #219653);
}

.quote-2 {
  background: linear-gradient(135deg, #2ECC71, #27AE60);
}

.quote-3 {
  background: linear-gradient(135deg, #2ECC71, #2ECC81);
}

/* 悬浮发帖按钮 */
.float-post-btn {
  position: fixed;
  bottom: 50px;
  right: 50px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, #27AE60, #2ECC71);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(39, 174, 96, 0.4);
  transition: all 0.3s;
  z-index: 99;
  color: white;
}

.float-post-btn:hover {
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 6px 20px rgba(39, 174, 96, 0.6);
}

/* 发帖对话框 */
.post-dialog :deep(.el-dialog__header) {
  background: linear-gradient(90deg, #27AE60, #2ECC71);
  color: white;
  padding: 25px;
}

.post-dialog :deep(.el-dialog__title) {
  color: white;
  font-size: 22px;
}

.post-dialog :deep(.el-dialog__body) {
  padding: 30px;
}

.post-dialog :deep(.el-dialog__footer) {
  padding: 20px 30px;
}

.post-dialog :deep(.el-form-item__label) {
  font-size: 18px;
  color: #333;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .community-content {
    flex-direction: column;
    padding: 0 20px;
  }
  
  .sport-nav,
  .posts-container,
  .ranking-container {
    width: 100%;
  }
  
  .nav-card,
  .posts-card,
  .ranking-card {
    padding: 20px;
  }
  
  .search-container {
    gap: 15px;
  }
  
  .search-btn {
    font-size: 16px;
    padding: 12px 20px;
  }
  
  .post-title {
    font-size: 20px;
  }
  
  .post-content {
    font-size: 16px;
  }
  
  .post-author {
    font-size: 18px;
  }
  
  .action-item {
    font-size: 16px;
  }
  
  .float-post-btn {
    width: 60px;
    height: 60px;
    bottom: 30px;
    right: 20px;
  }
}
</style>